<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
	<title>注册第一步</title>
	<link href="../favicon.ico" rel="shortcut icon">
	<link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/system/public.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/css/system/register.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/css/system/find_psw.css" rel="stylesheet"/>
   
</head>
<body class="s_body k_body">
     <div class="s_content">
        <h3><span>1</span><p>/2</p> 绑定手机号，完成注册</h3>
        <div class="s_login_box">            
            <ul class="s_psw_list fix">
                <li>
                    <span>手机号</span>
                    <div class="s_input_box">
                        <input type="text" placeholder="请输入手机号" id="zc_mobile" maxlength = "11"/>
                    </div>
                </li>   
                <li class="s_code">
                    <span>验证码</span>
                    <div class="s_input_box">           
                        <input type="text" placeholder="请输入验证码" id="zc_code" />   
                    </div>     
                    <input type="button" value="获取验证码" class="s_codes J_xcode"
                    		id="zc_codeButton" />
                </li>
                <li class="right">
                	<span>密码</span>
                    <div class="code J_xpassw on"><i></i></div>
                    <div class="s_input_box">
                    <input type="password" class="text" placeholder="请设置密码" id="zc_pwd" maxlength = "10">
                    </div>
                    <div id="warning_word" style="color:red;text-align:center;"></div>  
                </li>  
                        
            </ul>
            <a href="javascript:;" class="s_dl_button" id="tonext">下一步</a>
        </div>
    </div>
    <div class="s_footer">
        <p>zhfeat</p>
    </div>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$('.s_psw_list li .s_input_box input').focus(function(){
    $(this).addClass('focus');
});
$('.s_psw_list li .s_input_box input').blur(function(){
    $(this).removeClass('focus');
});
$('.J_xpassw').click(function(){
    var $this = $(this),
        input = $this.parents('.right').find('.text');
    if($this.hasClass('on')){
        $this.removeClass('on');
        input.attr('type' , 'text');
    }else{
        $this.addClass('on');
        input.attr('type' , 'password');
    };
});
</script>
<!-- //点击“下一步”，触发提交          $('#').val(); -->
<script type="text/javascript">
var wword = $("#warning_word");
$(function() {
	$('#tonext').click(
			function() {
				//disable_ddl();
				wait(this);
				//手机号码
				var account = $('#zc_mobile').val();
				//密码
				var password = $('#zc_pwd').val();
				//验证码
				var ver_code = $('#zc_code').val();
				var url = "${pageContext.request.contextPath}/api/register/create";
				var params = {
					"account" : account,
					"password" : password,
					"ver_code" : ver_code
				};
				$.ajax({	type : "POST",
							url : url,
							data : params,
							dataType : "json",
							success : function(data) {
								if("注册成功"==data.message){
								window.location.href = "${pageContext.request.contextPath}/ui/registerTwo";
								}else{
									/* 显示错误 */
			        	  			//error = data.message
			        	  			//$('.s_red_two').text(error);
			        	  			/* 重置密码 */
			        	  			//$('#login_pwd').val("");
			        	  				
									wword.text(data.message);
								}
							}
						});					
				});
	});			
</script>
<script type="text/javascript">
//提示框信息
var wword = $("#warning_word");
//验证手机号码
$(function(){
	$('#zc_mobile').blur(function(){
		var tel = $('#zc_mobile').val();
		if(tel==null || tel==""){
			   return;
		}
		var reg =/^1(3|4|5|7|8)\d{9}$/;//正则表达式 				
		//var tel=document.getElementById("zc_mobile"); 
		//匹配
		var result = reg.test(tel);				
		if(!result){
			//手机号格式不正确，执行下面     
			//$('#zc_mobile').focus();
			document.getElementById("zc_mobile").value="";
			wword.text("不是正确的11位手机号");
			//alert("不是正确的11位手机号"); 
		   // break;
		}else{  
			//手机号格式正确
			wword.text("");
		}
	});
})
</script>
<script type="text/javascript">
var wword = $("#warning_word");
$(function(){
	$('#zc_pwd').blur(function(){
		//用户输入的密码
		var password=$('#zc_pwd').val();
		if(password==null || password==""){
			   return;
		    }
		//正则表达式,必须要有数字和字母，为6到10位
		var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
		//判断
		 if(!reg.test(password)){
		     //$('#zc_pwd').focus();
		     document.getElementById("zc_pwd").value="";
		     wword.text("不符合规范,必须要有数字和字母");
		}else{
			wword.text("");
		}
	});
})
</script>	
<!-- //点击发送验证码， -->	
<script	type="text/javascript">
var wword = $("#warning_word");
var isR=0;
//判断是否注册的方法
function isReg(){
	/* 获取手机号，发送到后台 */
	var mobile = $('#zc_mobile').val();
	var code_type ="reg_code"; 
	url = "${pageContext.request.contextPath}/api/register/isReg";  	      
	var params = {"mobile":mobile ,"code_type":code_type};
	$.ajax({
		type : "POST",
		url : url,
		data : params,
		dataType : "json",
		success : function(data) {
			console.log(data);
			//如果注册返回的结果是“success”，则执行验证码发送请求
			//alert(mobile);
			if("1"==data.error_code){
				isR=1;
				//alert("未被注册，可以继续注册");
				console.log("未被注册，可以继续注册");				 
				//time();
				smsSend();
			}else{								
				/* 显示错误 */
				//error = data.message
				alert(data.message );
				wword.text(data.message );
				isR=2;
			}			
		}
	});
}
//发送短信的方法
function smsSend(){
	/* 获取手机号，发送到后台 */
	var mobile = $('#zc_mobile').val();   
	var code_type ="reg_code"; 	    	   
	console.log(mobile);
	url = "${pageContext.request.contextPath}/api/sms/verification_code/send";  	      
	var params = {"account":mobile ,"code_type":code_type};
	$.ajax({		
		type : "POST",
		url : url,
		data : params,
		dataType : "json",
		success : function(data) {
			console.log(data);
			//如果注册返回的结果是“success”，则执行验证码发送请求
			//alert(mobile);
			if("0"==data.error_code){
				//显示提示添加成功并且发送短信成功
				//如果发送成功，还要将登录码存入数据库
				//alert("发送验证码成功");
				time();
				console.log("发送验证码成功");
			}else{
				/* 显示错误 */
				//error = data.message 
				/* if(data.message=="请稍后发送"){
					wword.text("");
				}else{ */
					wword.text(data.message);
				//}
			}			
		}
	});
}
$(function(){
    $('.J_xcode').click(function(){
    	wait(this);
  	    var mobile = $('#zc_mobile').val();
	    if(mobile==null || mobile==""){
		   $('#zc_mobile').focus();
		   return;
	    }	    
	    //disabled_t();
 	    isReg();
   });
});
//60s
function time(){
	var $this = $(".J_xcode"),
    _this = this,
    i = 60;
_this.disabled = 'disabled';
clearInterval(repeat);
var repeat = setInterval(function(){
    i--;
    if(i == 0){
    	$(".J_xcode").attr("disabled",false);
        $this.removeClass('gray').val('获取验证码');
        clearInterval(repeat);        
    }else{
    	$(".J_xcode").attr("disabled",true);
        $this.addClass('gray').val(i+'s后重新获取');
        
    }
},1000);	
}    




function wait(me){
console.log("进入wait");
me.disabled = true;
window.setTimeout(function(){
me.disabled = false;
},5000);
}
//验证密码失去焦点事件
$(function(){
	$('#zc_code').blur(function(){ 
		wword.text("");
   });
});

 
$("#zc_code").focus(function(){
	 wword.text("");
});
	
</script>	
</body>
</html>

